<template>
    <div class="ssbmx">
        <div class="sc-bor">
            <img src="../../static/img3/zuo.png" @click="backward">
			<div class="sc-header" style="left:.55rem; right:.55rem;">松鼠币明细</div>
		</div>
        <div class="account">
            <div class="account-point f1">
                <i class="cm-icon"></i>
                {{sumScore}}
            </div>
            <div class="make-point">
                去赚松鼠币
                <i></i>
            </div>
        </div>
        <div class="account-list">
            <div class="account-item">
                <div class="item-content f1">
                    <p class="item-type">
                        <span>会员签到赠送松鼠币</span>
                        <p class="item-time">2017-08-15 09:45:25</p>
                    </p>
                </div>
                <p class="fr">40</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  methods:{
      backward(){
            this.$router.go(-1);
        }
  },
    data(){
        return {
            sumScore: 40,
        }
    }
}
</script>
<style scoped>
@import "../../static/css/base.css";
.ssbmx{
    background-color: #f9f9f9;
    z-index: 99;
    height: 100%;
    position: fixed;
    width: 100%;
}
.sc-header{
	font-size: 17px;
	color: #000;
	display: block;
	position: absolute;
	top: 0;
	z-index: 0;
	overflow:hidden;
	margin: 0 .1rem;
	min-width: .3rem;
	height: 44px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	line-height: 44px;
}
.sc-bor{
	border-bottom: .01rem solid #ddd;
	height: 44px;
}
.sc-bor img{
    margin: .2rem;
}
.account{
    box-sizing: content-box;
    padding: .1rem;
    background-color: #fff;
    height: 2em;
    line-height: 2em;
    font-size: 16px;
}
.account-point{
    position: relative;
    font-weight: 700;
    overflow: hidden;
    max-width: 70%;
    color: #77bc1f;
    padding-left: .4rem;
    display: inline-block;
}
.account-point .cm-icon{
    left:.1rem;
}
.cm-icon{
    position: absolute;
    top:27%;
    background-image: url(../../static/img3/songshubi.png);
    background-size: 100% auto;
    width: .26rem;
    height: .26rem;
}
f1{
    float: left;
}
.make-point{
    position: relative;
    color: #77bc1f;
    padding-right: .13rem;
    float: right;
    font-size: 14px;
}
.account-list{
    margin-top: .1rem;
    padding-left: .1rem;
    background-color: #fff;
    font-size: 15px;
    border-bottom: 1px solid #f5f5f5;
}
.account-item{
    padding: .11rem .13rem .14rem 0;
}
.item-content{
    width: 80%;
    padding-left: .05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.item-type{
    white-space: nowrap;
    margin: 0;
    line-height: 1.5em;
}
.item-time{
    margin: 0;
    line-height: 2em;
    color: #999;
    font-size: 14px;
}
.account-item .fr{
    margin: 0;
    line-height: 3em;
    color: #77bc1f;
    float: right;
}
</style>

